<template>
<!-- 请在views/Home.vue中查看使用方法 -->
  <div id="vueDrag" class="router-bar">
    <div
      id="slot-box"
      class="slot_"
      @click="clickback"
      @touchstart="dragStart_slot"
      @touchmove.stop.prevent="dragMove_slot"
      @touchend="dragEnd_slot"
    >
      <slot />
    </div>
  </div>
</template>

<script>
export default {
  name: 'VueDrag',
  props: {
    options: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      windowWidth: window.innerWidth,
      windowHeight: window.innerHeight,
      myOptions: {
        position: this.options.position ? this.options.position : 'left',
        static: this.options.static ? this.options.static : false,
        width: this.options.width ? `${this.options.width}px` : 'auto',
        bottom: this.options.bottom ? this.options.bottom : 0,
      },
      slotDivHeight: 0,
      slot: {
        tempX: 0,
        tempY: 0,
        x: 0,
        y: 0,
        curX: 0,
        curY: 0,
        isdrag: false,
      },
    }
  },
  mounted() {
    if (this.myOptions.position === 'right') {
      document.getElementById('slot-box').style.right = '0'
    } else {
      document.getElementById('slot-box').style.left = '0'
    }
    // #slot-img
    document.getElementById('slot-box').style.width = this.myOptions.width
    document.getElementById(
      'slot-box'
    ).style.marginBottom = `${this.myOptions.bottom}px`
    document.getElementById(
      'slot-box'
    ).style.marginTop = `${this.myOptions.Top}px`
    document.getElementById('slot-box').addEventListener(
      'touchstart',
      function (e) {
        e.stopPropagation() // 阻止它的冒泡事件
      },
      false
    )
  },
  methods: {
    dragStart_slot(e) {
      const scale = e.target.offsetWidth / e.target.offsetHeight
      this.slotDivHeight = this.options.width
        ? this.options.width / scale
        : e.target.offsetWidth / scale
      document.getElementById(
        'slot-box'
      ).style.height = `${this.slotDivHeight}px`
      document.getElementById('slot-box').style.transition = 'none'
      this.slot.tempX = parseInt(
        document.getElementById('slot-box').offsetLeft + 0
      )
      this.slot.tempY = parseInt(
        document.getElementById('slot-box').offsetTop + 0
      )
      this.slot.x = e.touches[0].pageX
      this.slot.y = e.touches[0].pageY
    },
    dragMove_slot(e) {
      this.slot.isdrag = true
      if (this.slot.isdrag) {
        this.slot.curX = this.slot.tempX + e.touches[0].pageX - this.slot.x
        this.slot.curY = this.slot.tempY + e.touches[0].pageY - this.slot.y
        // 边界判断
        this.slot.curX = this.slot.curX < 0 ? 0 : this.slot.curX
        this.slot.curY = this.slot.curY < 0 ? 0 : this.slot.curY
        this.slot.curX =
          this.slot.curX <
          document.documentElement.clientWidth -
            document.getElementById('slot-box').offsetWidth
            ? this.slot.curX
            : document.documentElement.clientWidth -
              document.getElementById('slot-box').offsetWidth
        this.slot.curY =
          this.slot.curY <
          document.documentElement.clientHeight -
            document.getElementById('slot-box').offsetHeight -
            (this.myOptions.bottom ? this.myOptions.bottom : 0)
            ? this.slot.curY
            : document.documentElement.clientHeight -
              document.getElementById('slot-box').offsetHeight -
              (this.myOptions.bottom ? this.myOptions.bottom : 0)

        if (this.slot.isdrag === true) {
          document.getElementById('slot-box').style.top = `${this.slot.curY}px`
          document.getElementById('slot-box').style.left = `${this.slot.curX}px`
        }

        // 禁止浏览器默认事件
      }
    },
    dragEnd_slot() {
      document.getElementById('slot-box').style.transition = 'all 0.2s ease'
      if (this.slot.isdrag === false || this.myOptions.static === true) {
        return
      }
      if (this.slot.curX > this.windowWidth / 3) {
        document.getElementById('slot-box').style.left = `${
          this.windowWidth - document.getElementById('slot-box').offsetWidth
        }px`
      } else {
        document.getElementById('slot-box').style.left = '0'
      }
      this.slot.isdrag = false
    },
    clickback() {
      this.$emit('slot-click')
    },
  },
}
</script>

<style lang="scss" scope>
.router-bar {
  width: 100%;
  z-index: 88;
  box-sizing: border-box;
  pointer-events: auto;
  #slot-box {
    position: fixed;
    z-index: 99;
    bottom: 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
}
</style>